<template>
  <div>
    <header class="header">
      <div class="title">
        <img src="../../../assets/images/01_11.png" alt="" class="img_zuo" @click="clickBack" />
        <div>宣传部署</div>
        <div class="btn-add">
<!--          <img src="../../../assets/images/addnew.png"/>-->
        </div>
      </div>
    </header>
    <div class="menPhis-main titles">
      <van-list
        class="van-pull-refresh"
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        @load="onLoads">
        <div class="menPhis-box" v-for="(item, index) in searchList" :key="index" @click="jumpDetail(item)">
          <div class="menPhis-box-title">
            <img :src="imgUrlFilter(item.cid)" class="img">
            <div class="menPhis-box-text">
              <div class="box-title">[{{ item.type }}]
                <span style="margin-right: 5px">{{ item.title }}</span>
              </div>
              <div class="box-titles">
                <img src="../../../assets/images/tabbar_user.png" class="imgs">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div style="font-size: 0.35rem">{{ item.TIME }}</div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgData: {
        one: require('../../../assets/images/yanpan.png'),
        two: require('../../../assets/images/wangluo.png'),
        three: require('../../../assets/images/ruhu.png'),
        four: require('../../../assets/images/xianchang.png'),
        five: require('../../../assets/images/xietiao.png'),
        six: require('../../../assets/images/yuetan.png'),
        seven: require('../../../assets/images/yanlian.png'),
        eight: require('../../../assets/images/tuiyan.png'),
        nine: require('../../../assets/images/peixun.png'),
        ten: require('../../../assets/images/bushu.png'),
        eleven: require('../../../assets/images/baokan.png'),
        twelve: require('../../../assets/images/zhenggai.png')
      },
      routerData: {},
      routerDatas: {},
      searchList: [],
      pageInfo: {
        page: 1,
        pageSize: 20
      },
      loading: false,
      finished: false,
      refreshing: false,
      total: 1,
      finishedText: '',
      error: false
    }
  },
  beforeRouteLeave(to, from, next) {
    //设置路由的 meta
    if(!(to.path === '/infodetail' || to.path === '/xcbs_detail' || to.path === '/hard_detail_ordinary')){
      localStorage.removeItem("list_scrollTop");
    }
    next();
  },
  //进入该页面时，用之前保存的滚动位置赋值
  beforeRouteEnter (to, from, next) {
    next(vm => {
     console.log(from.path)
      let scrollTop = localStorage.getItem("list_scrollTop")?JSON.parse(localStorage.getItem("list_scrollTop")):null;
      if(scrollTop || scrollTop === 0){
        $('.menPhis-main').animate({ scrollTop: scrollTop }, 0);
      }else{
        vm.userId = Number(localStorage.getItem("userId"));
        vm.routerData = JSON.parse(sessionStorage.getItem('time'));
        vm.routerDatas = JSON.parse(sessionStorage.getItem('patrol'));
        vm.show = false;
        vm.total = 1;
        vm.searchList = [];
        vm.pageInfo.page = 1;
        if (vm.searchList.length === 0) {
          vm.loading = true;
          vm.finished = true;
          vm.onLoad();
        }
      
      }
      if( sessionStorage.getItem("xcpxleibie")==2){
         vm.userId = Number(localStorage.getItem("userId"));
        vm.routerData = JSON.parse(sessionStorage.getItem('time'));
        vm.routerDatas = JSON.parse(sessionStorage.getItem('patrol'));
        vm.show = false;
        vm.total = 1;
        vm.searchList = [];
        vm.pageInfo.page = 1;
        if (vm.searchList.length === 0) {
          vm.loading = true;
          vm.finished = true;
          vm.onLoad();
        }
      }
      localStorage.removeItem("list_scrollTop");
    })
  },
  mounted() {
  },
  methods: {
    onLoads () {
      if (this.searchList.length > 0) {
        this.onLoad();
      } else {
        this.loading = false;
      }
    },
    //  分页加载
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.searchList = [];
          this.refreshing = false;
        }
        if (this.searchList.length !== this.total) {
          this.finished = false;
          this.query();
        } else {
          if (this.total > 10) {
            this.finishedText = '没有更多啦';
          } else {
            this.finishedText = '';
          }
          this.finished = true;
        }
      }, 1000);
    },
    //  跳转详情
    jumpDetail (datas) {
       sessionStorage.setItem("xcpxleibie",1);
      localStorage.setItem("list_scrollTop",$('.menPhis-main').scrollTop());
      let data = {
        id: datas.id,
        lujing: 'statistical_list'
      }
      if (data.id) {
        sessionStorage.setItem('todetail', JSON.stringify(data))
        if(data.type === '信息报送'){
          this.$router.push('/infodetail')
        }else{
          this.$router.push('/xcbs_detail')
        }
      } else {
        localStorage.setItem('hard_detail_from', '/statistical_list')
        this.$router.push({
          path: '/hard_detail_ordinary',
          query: { id: datas.noweId, ids: 11 }
        });
      }
    },
    //  查询数据
    query () {
      let that = this;
      let params = {
        dwId: that.routerData.dwId,
        time: that.routerData.time,
        lev: that.routerDatas.chooseId === 2 ? that.path === '/statistical' ? 0 : 1 : that.routerData.lev,
        page: that.pageInfo.page,
        num: that.pageInfo.pageSize,
      };
      if (this.routerData.ids !== undefined) {
        params.operatorId = that.routerData.column;
        if (this.routerData.dwleId !== 100) {
          params.level = 1
        }
      } else {
        params.cId = that.routerData.column;
        if (this.routerDatas.chooseId !== 2) {
          if ((this.routerData.dwlxid === 1 && this.routerData.lev === 2) ||
            (this.routerData.path === '/index_thisLevel' && this.routerData.lev === 1)) {
            params.level = 1
          }
        }
      }
      if (this.routerData.chooseId) {
        params.chooseId = this.routerData.chooseId
      }
      that.axios.get(`${that.$global_msg.Url.host}/partroInspection/grczlb`,
        { params }).then( res => {
        if (res.data.total === 0) {
          that.$toast("暂无数据");
          that.finished = true;
          return false
        }
        that.searchList = that.searchList.concat(res.data.list);
        that.total = res.data.total;
        that.pageInfo.page++;
        that.loading = false;
      }).catch( e => terminal._error(e))
    },
    imgUrlFilter (str) {
      let that =this;
      const file = {
        1059: that.imgData.two,
        1058: that.imgData.three,
        1057: that.imgData.four,
        1056: that.imgData.five,
        1055: that.imgData.six,
        1054: that.imgData.seven,
        1053: that.imgData.eight,
        1052: that.imgData.nine,
        1051: that.imgData.ten,
        1050: that.imgData.one,
        1047: that.imgData.four,
        1046: that.imgData.five,
        1044: that.imgData.six,
        1041: that.imgData.nine,
        1040: that.imgData.ten,
        1039: that.imgData.four,
        1038: that.imgData.one,
        1049: that.imgData.eleven,
        1068: that.imgData.twelve
      };
      return file[str];
    },
    //  返回
    clickBack () {
      this.$router.back();
      // this.$router.push({
      //   path: this.routerData.path
      // })
    }
  },
  filters: {
  }
}
</script>
<style scoped>
  * {
    box-sizing: border-box;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add {
    position: absolute;
    right: 0.37037rem;
    width: auto !important;
    height: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
  }
  .btn-add img {
    width: 0.529629rem;
    height: 0.529629rem;
  }
  .menPhis-main {
    /*min-height: 100vh;*/
    padding: 1.8519rem 0.262963rem 0;
  }
  .menPhis-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.277778rem 0;
    width: 100%;
  }
  .img {
    width: 0.731481rem;
    height: 0.731481rem;
  }
  .imgs {
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.2rem;
  }
  .menPhis-box-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 75%;
  }
  .box-title {
    font-size: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*display: flex;*/
    align-items: center;
  }
  .box-titles {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.296296rem;
    color: #999;
  }
  .menPhis-box-text {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    line-height: 55px;
    margin-left: 0.27777rem;
  }
</style>
